<template>
    <view>
        <cu-custom bgColor="bg-gradual-green" isBack="true">
            <block slot="content">申请发票</block>
            <block slot="backText">返回</block>
        </cu-custom>

        <form>
            <view class="cu-bar bg-white solid-bottom margin-top">
                <view class="action">
                    <text class="cuIcon-titles text-blue"></text> 发票信息
                </view>
            </view>
            <view class="cu-form-group">
                <view class="title">发票抬头</view>
                <picker @change="TitleChange" :value="title_index" :range="title_type">
                    <view class="picker">
                        {{title_index>-1?title_type[title_index]:"请选择发票抬头类型"}}
                    </view>
                </picker>
            </view>
            <view class="cu-form-group">
                <view class="title">发票抬头内容</view>
                <input @input="onInputTitle" placeholder="请输入发票抬头内容" name="title"/>
            </view>
            <view class="cu-form-group">
                <view class="title">发票内容</view>
                <input @input="onInputContent" placeholder="请输入发票内容" name="content"/>
            </view>
            <view class="cu-form-group" v-show="isEnterprise">
                <view class="title">发票类型</view>
                <picker @change="InvoiceTypeChange" :value="invoicetype_index" :range="invoice_type">
                    <view class="picker">
                        {{invoicetype_index>-1?invoice_type[invoicetype_index]:"请选择发票类型"}}
                    </view>
                </picker>
            </view>
            <view class="cu-form-group" v-show="isEnterprise">
                <view class="title">企业税号</view>
                <input @input="onInputTax_number" placeholder="请输入企业税号" name="tax_number"/>
            </view>
            <view class="cu-form-group" v-show="isVAT">
                <view class="title">企业的注册地址</view>
                <input @input="onInputEp_addr" placeholder="请输入企业的注册地址" name="ep_addr"/>
            </view>
            <view class="cu-form-group" v-show="isVAT">
                <view class="title">企业的注册电话</view>
                <input @input="onInputEp_phone" placeholder="请输入企业的注册电话" name="ep_phone"/>
            </view>
            <view class="cu-form-group" v-show="isVAT">
                <view class="title">企业的开户银行</view>
                <input @input="onInputEp_bank" placeholder="请输入企业的开户银行" name="ep_bank"/>
            </view>
            <view class="cu-form-group" v-show="isVAT">
                <view class="title">企业的开户银行账号</view>
                <input @input="onInputEp_bank_acc" placeholder="请输入企业的开户银行账号" name="ep_back_acc"/>
            </view>

            <view class="cu-bar bg-white solid-bottom margin-top">
                <view class="action">
                    <text class="cuIcon-titles text-blue"></text> 收货人信息
                </view>
            </view>
            <view class="cu-form-group">
                <view class="title">收货人手机号</view>
                <input @input="onInputUser_phone" placeholder="请输入收货人手机号" name="user_phone"/>
            </view>
            <view class="cu-form-group">
                <view class="title">收货人姓名</view>
                <input @input="onInputUser_name" placeholder="请输入收货人姓名" name="user_name"/>
            </view>
            <view class="cu-form-group">
                <view class="title">地址选择</view>
                <picker mode="region" @change="RegionChange" :value="region">
                    <view class="picker">
                        {{region[0]}}，{{region[1]}}，{{region[2]}}
                    </view>
                </picker>
            </view>
            <view class="cu-form-group">
                <view class="title">收货人所在详细地址</view>
                <input @input="onInputUser_detail" placeholder="请输入详细地址" name="user_addr_detail"/>
            </view>

        </form>

        <view style="text-align: center;margin-top: 20rpx;">
            <button class="cu-btn bg-green shadow" @click="submit">提交申请</button>
        </view>
    </view>
</template>

<script>
import {ORDER_API} from '@/API.js';
import getInvoiceData from './invoiceData.js';
export default {
    data() {
        return {
            swift_id: 0,

            isEnterprise: false,
            title_index: -1,
            title_type: ['企业', '个人或事业单位'],

            isVAT: false,
            invoicetype_index: -1,
            invoice_type: ['增值税普通发票', '增值税专用发票'],

            region: ['北京市', '北京市', '海淀区'],

            input_title_type: '',
            input_title: '',
            input_content: '',
            input_invoice_type: '',
            input_tax_number: '',
            input_enterprise_address: '',
            input_enterprise_telphone: '',
            input_enterprise_bank: '',
            input_enterprise_bank_account: '',

            input_user_phone: '',
            input_user_name: '',
            input_user_address_province: '北京市',
            input_user_address_city: '北京市',
            input_user_address_district: '海淀区',
            input_user_address_detail: ''
        };
    },
    onLoad(res) {
        this.swift_id = res.swift_id;
    },
    methods: {
        TitleChange(e) {
            this.title_index = e.detail.value;
            this.isEnterprise = (this.title_index == 0);
            this.input_title_type = this.title_type[this.title_index];
        },
        InvoiceTypeChange(e) {
            this.invoicetype_index = e.detail.value;
            this.isVAT = (this.invoicetype_index == 1);
            this.input_invoice_type = this.invoice_type[this.invoicetype_index];
        },
        RegionChange(e) {
            this.region = e.detail.value;
            this.input_user_address_province = this.region[0];
            this.input_user_address_city = this.region[1];
            this.input_user_address_district = this.region[2];
        },
        onInputTitle: function(e) {
            this.input_title = e.target.value;
        },
        onInputContent: function(e) {
            this.input_content = e.target.value;
        },
        onInputTax_number: function(e) {
            this.input_tax_number = e.target.value;
        },
        onInputEp_addr: function(e) {
            this.input_enterprise_address = e.target.value;
        },
        onInputEp_phone: function(e) {
            this.input_enterprise_telphone = e.target.value;
        },
        onInputEp_bank: function(e) {
            this.input_enterprise_bank = e.target.value;
        },
        onInputEp_bank_acc: function(e) {
            this.input_enterprise_bank_account = e.target.value;
        },
        onInputUser_name: function(e) {
            this.input_user_name = e.target.value;
        },
        onInputUser_phone: function(e) {
            this.input_user_phone = e.target.value;
        },
        onInputUser_detail: function(e) {
            this.input_user_address_detail = e.target.value;
        },
        submit() {
            var post_data = getInvoiceData.getData(this);
            console.log(post_data);
            uni.request({
                url: ORDER_API.invoice.url,
                method: ORDER_API.invoice.method,
                header: {'http-token': this.getToken()},
                data: post_data,
                success: function(res) {
                    console.log(res);
                    if (res.statusCode == 200) {
                        uni.showToast({
                            title: '提交成功'
                        });
                        setTimeout(function() {
                            uni.navigateBack({});
                        }, 1000);
                    }
                    else {
                        uni.showToast({
                            title: res.data,
                            icon: 'none',
                            duration: 2000
                        });
                    }
                }.bind(this)
            });
        }
    }
};
</script>

<style>
</style>
